<template>
  <header style="display: flex; justify-content: space-between; align-items: center;">
    <span>{{ title }}</span>
    <span>
      <slot />
    </span>
  </header>
</template>

<script>
export default {
  name: 'Title',
  props: {
    title: {
      type: String,
      required: true,
      default: ''
    }
  }
}
</script>

<style scoped lang="scss">
header {
  padding: 6px;
  font-weight: bold;
  background: #eee;
}
</style>
